import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { Card, Typography } from 'antd';

const { Title, Paragraph } = Typography;

const TinyMCEPage: React.FC = () => {
  const editorRef = useRef<any>(null);

  const log = () => {
    if (editorRef.current) {
      console.log(editorRef.current.getContent());
    }
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>TinyMCE 富文本编辑器</Title>
        <Paragraph>
          TinyMCE 是一个功能强大的所见即所得富文本编辑器，广泛用于网页内容编辑。
        </Paragraph>
        
        <div style={{ marginTop: '20px' }}>
          <Editor
            onInit={(evt, editor) => editorRef.current = editor}
            initialValue="<p>这是 TinyMCE 编辑器的初始内容。</p>"
            init={{
              height: 500,
              language: 'zh-Hans',
              elementpath: false,
              branding: false,
              menubar: true,
              plugins: [
                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
              ],
              toolbar: 'undo redo | blocks | ' +
                'bold italic forecolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
              content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
            }}
          />
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <button onClick={log}>获取内容</button>
        </div>
      </Card>
    </div>
  );
};

export default TinyMCEPage;